
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">

      <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">

        <div class="chart-wrapper">
          <el-button-group>
            <el-button type="primary" @click="abb(12)">一年</el-button>
            <el-button type="primary" @click="abb(24)">两年 </el-button>
            <el-button type="primary" @click="reset()">原始 </el-button>
            <el-button @click="abb(6)">重置</el-button>
          </el-button-group>
          <div id="sum">总消费:{{ sum }}</div>
          <bar-chart ref="barChart" />
        </div>
      </el-row>
      <el-row :gutter="12">
        <el-col
          :span="12"
        >
          <div class="chart-wrapper">
            <pie-chart ref="spendChart" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-wrapper">
            <pie-chart ref="payChart" />
            <div /></div></el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import crudSpend from '@/api/spend'
import PieChart from '@/views/spend/echarts/PieChart'
import BarChart from '@/views/spend/echarts/BarChart'

import { getColor } from '@/utils/index'

export default {
  components: { PieChart, BarChart },
  data() {
    return {
      payTypeObject: {},
      spendTypeObject: {},
      arr: [],
      date: [],
      price: [],
      monthNumber: [],
      getYear: 0,
      sum: 0

    }
  },
  mounted() {
    this.origin()
  },
  created() {
    this.autoTo()
  },
  methods: {
    autoTo() {
      var index = 0
      var data = [6, 12, 24]
      var that = this
      setInterval(function() {
        var thes = that
        index++
        if (index > 2) {
          index = 0
        }
        thes.abb(data[index])
      }, 2000)
    },
    abb(num) {
      this.sum = 0
      var price = []
      var date = []
      price = this.price.slice(0, num)
      date = this.date.slice(0, num)
      for (var i = 0; i < price.length; i++) {
        this.sum += parseInt(price[i])
      }
      this.$refs.barChart.initChart(date, price, this.monthNumber)
    },
    init(num) {
      /* 获取柱状图数据 */
      crudSpend.everyMonthNum(num).then((res) => {
        this.sum = 0
        this.monthNumber = []
        this.date = []
        this.price = []
        this.arr = res
        this.arr.pop()
        this.arr.forEach(res => (
          /* eslint-disable */
            this.price.push(res.price),
            this.date.push(res.date),
            this.monthNumber.push(res.monthNumber))
        )
        for (var i = 0; i < this.price.length; i++) {
          this.sum += parseInt(this.price[i]);
        }
        this.$refs.barChart.initChart(this.date, this.price, this.monthNumber)
      })
      /*获取花费类型的数据*/
        crudSpend.getSpendTypeNum("spend_type").then((res) => {
          console.log(res)
        this.spendTypeObject.dataList=res
        this.spendTypeObject.name='花费类型占比'
        this.spendTypeObject.colorList=[getColor(),getColor(),getColor(), getColor()]
        this.$refs.spendChart.initChart(this.spendTypeObject)
      });

      /*获取支付类型数据*/
      crudSpend.getPayTypeNum("pay_type").then((res) => {
        
        this.payTypeObject.dataList=res
        this.payTypeObject.name='支付类型占比'
        this.payTypeObject.colorList=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
        this.$refs.payChart.initChart(this.payTypeObject)
      });
    },
    origin() {
      let oldYear = 2019;
      let oldMonth = 10;
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      this.getYear = (year - oldYear) * 12 + (month - oldMonth) + 1;
      this.init(this.getYear);
    },
    reset(){
        this.abb(this.getYear)
    },

    // drawLine(date, price, monthNumber) {
    //   const myChart1 = echarts.init(document.getElementById("myChart1"));
    //   const that = this;
    //   myChart1.setOption({
    //     color: ["#4fd7fd", "#b2f567"],
    //     legend: {
    //       // data: ["总消费",'总次数'],
    //       // textStyle: {
    //       //   fontSize: "12",
    //       //   color: "#fff",
    //       // },
    //     },
    //     toolbox: {
    //       show: true,
    //       feature: {
    //         dataView: { show: true, readOnly: false },
    //         magicType: { show: true, type: ['line', 'bar'] },
    //         restore: { show: true },
    //         saveAsImage: { show: true }
    //       }
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       formatter:function(params){
    //          return params[0].name+"<br>"+
    //                 params[0].marker+"当月"+params[0].seriesName+"："+params[0].data+"元"+"<br>"+
    //                 params[1].marker+"当月"+params[1].seriesName+"："+params[1].data+"次"
    //                 ;
    //       },
    //     animation: true,
    //     animationDuration: 20000,
    //       axisPointer: {
    //         type: "cross",
    //         crossStyle: {
    //           color: "red",
    //         },
    //       },
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: date,
    //         //坐标轴刻度标签的相关设置。
    //         axisLabel: {
    //           textStyle: {
    //             fontSize: "12",
    //             color: "red",
    //           },
    //         },
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         splitLine:{show: false},
    //         name: "元",
    //         type: "value",
    //         axisLabel: {
    //           textStyle: {
    //             fontSize: "12",
    //             color: "red",
    //           },
    //         },
    //       },
    //       {
            
    //         name: "次",
    //         type: "value",
    //         axisLabel: {
    //           textStyle: {
    //             fontSize: "12",
    //             color: "red",
    //           },
    //         },
    //       },
    //     ],
    //     series: [
    //       {
    //         name: "总消费",
    //         type: "bar",
    //         data: price,
    //         barWidth: 15,
    //         markPoint: {
    //             data: [{ type: 'max' }]
    //       },
    //       markLine: {
    //         data: [{ type: 'average', name: 'Avg' }]
    //       }
    //       },
    //       {
    //         name: "总次数",
    //         type: "line",
    //         yAxisIndex: 1,
    //         data: monthNumber,
    //         barWidth: 15,
    //       },
    //     ],
    //   });
    // }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

#sum {
  /* border:1px solid black; */
  width: 200px;
  height: 50px;
  position: relative;
  left: 45%;
  font-size: 28px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  text-align: center;
}

.dashboard-editor-container {
    padding: 10px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
     .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
</style>